<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .price {
        margin-top: -50px;
        margin-left: 40%;
        line-height: 16px;
      }
    </style>
    <link rel="stylesheet" href="./cart.css" />
  </head>

  <body>
    <div class="box">
      <div class="container">
        <my-cart></my-cart>
      </div>
    </div>

    <script src="../../node_modules/vue/dist/vue.js"></script>

    <script>
      //   var cycle = new Vue()
      var CartTitle = {
        props: ['name'],
        template: `
        <div class="title" >{{name}}的商品</div>
      `,
      }

      var CartList = {
        props: ['datas'],
        data: function () {
          return {}
        },
        template: `
        <div>
          <div class="item" :key='item.id' v-for="item in datas">
            <img :src='item.img'/>
            <div class="name" >{{item.name}}</div>
            <div class='price'>{{item.price}}</div>
            <div class="change">
              <a href=""  @click.prevent='reduce(item.num,item.id,$event),biu(item.id,$event.target.nextElementSibling.value,$event)'>－</a>
              <input type="text" class="num" :value='item.num' v-on:input='biu(item.id,$event.target.value,$event)'/>
              <a href="" @click.prevent='add(item.num,item.id,$event),biu(item.id,$event.target.previousElementSibling.value,$event)'>＋</a>
            </div>
            <div class="del"  @click.prevent='$emit("delGoods",item.id)'>×</div>
          </div>
        </div>
      `,

        methods: {
          //当悬着inuput框自定义输入时e已经改变
          biu(id, num, e) {
            id = parseInt(id)
            if (num.trim().length > 0) {
              num = parseInt(num)
              this.$emit('changeTotal', id, num)
            } else {
              num = 0
            }
            console.log(id, num)
          },
          //单击ad事件
          add(num, id, e) {
            const addNum = ++e.target.previousElementSibling.value
          },
          //单击reduce减少
          reduce(num, id, e) {
            const redNum = e.target.nextElementSibling.value
            if (redNum > 0) {
              --e.target.nextElementSibling.value
            }
          },
        },
        computed: {
          inputChange() {},
        },
      }

      var CartTotal = {
        props: ['all'],
        template: `
        <div class="total">
          <span>总价：{{total}}</span>
          <button>结算</button>
        </div>
      `,

        computed: {
          total: function () {
            let sum = 0
            this.all.forEach((item) => {
              sum += item.price * item.num
            })
            return sum
          },
        },
      }

      Vue.component('my-cart', {
        data: function () {
          return {
            uname: '奥特曼',
            data: [
              {
                id: 1,
                name: 'TCL彩电',
                price: 1000,
                num: 1,
                img: 'img/a.jpg',
              },
              {
                id: 2,
                name: '机顶盒',
                price: 1000,
                num: 1,
                img: 'img/b.jpg',
              },
              {
                id: 3,
                name: '海尔冰箱',
                price: 1000,
                num: 1,
                img: 'img/c.jpg',
              },
              {
                id: 4,
                name: '小米手机',
                price: 1000,
                num: 1,
                img: 'img/d.jpg',
              },
              {
                id: 5,
                name: 'PPTV电视',
                price: 1000,
                num: 2,
                img: 'img/e.jpg',
              },
            ],
          }
        },
        template: `
        <div class="cart" >
          <cart-title :name='uname'></cart-title>
          <cart-list :datas="data"  @changeTotal='get' @delGoods='del($event)'></cart-list>
          <cart-total :all='data'  ></cart-total>
        </div>
      `,
        components: {
          'cart-title': CartTitle,
          'cart-list': CartList,
          'cart-total': CartTotal,
        },
        methods: {
          //单击增加减少
          get(id, sum, e) {
            this.data.some((item) => {
              if (item.id === id) {
                sum === 0 ? (item.num = 0) : (item.num = sum)
                console.log(item.num)
                return true
              }
            })
          },
          //单击删除某一项
          del(id) {
            const index = this.data.findIndex((item) => {
              return item.id === id
            })
            this.data.splice(index, 1)
          },
        },
      })

      var vm = new Vue({
        el: '.box',
        data: {},
      })
    </script>
  </body>
</html>
